<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/23
  Time: 17:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery联系人生成二维码代码</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: #262626;
        }
        #box{
            width:1000px;
            height:600px;
            margin:200px auto;
        }
        #box .qrcode{
            width:400px;
            height: 400px;
            float: left;
            margin: 40px 40px;
        }
        #box .introduce{
            width:500px;
            height: 600px;
            float: left;
        }
        .introduce p{
            width:200px;
            height: 40px;
            background: #333;
            float: left;
            margin:10px 20px;
            color:#fff;
            border-radius: 5px;
            overflow: hidden;
        }
        .introduce p span{
            float: left;
            width:50px;
            height:40px;
            color:#fff;
            text-align: center;
            line-height: 40px;
        }
        .introduce p input{
            width:150px;
            height:40px;
            float: left;
            border: 0;
            color:#fff;
            background:#000;
            text-indent:10px;
            outline: none;
        }
        .introduce .btn{
            width:440px;
            height:40px;
            text-align: center;
            line-height: 40px;
            background: #6c0;
        }
        .qrcode>img{
            display: block;border:5px solid white;
        }
    </style>

</head>
<body>

<div id="box">
    <h3 style="color: aliceblue">请用微信扫描的二微码</h3>
    <div class="introduce">
        <p>
            <span>姓名：</span>
            <input type="text" id="name" value="${teacher.getTeacherName()}${teacher.getTeacherNo()}">
            ${teacher.getTeacherName()}${teacher.getTeacherNo()}
        </p>
        <p>
            <span>学校：</span>
            <input type="text" id="company" value="华北水利水电大学">
            华北水利水电大学
        </p>
        <p>
            <span>职务：</span>
            <input type="text" id="title" value="教师(${teacher.getTeacherSex()})">
            教师(${teacher.getTeacherSex()})
        </p>
        <p>
            <span>籍贯：</span>
            <input type="text" id="address" value="${teacher.getTeacherAddress()}">
            ${teacher.getTeacherAddress()}
        </p>
        <p>
            <span>手机：</span>
            <input type="text" id="mobile" value="${teacher.getTeacherTell()}">
            ${teacher.getTeacherTell()}
        </p>
        <p>
            <span>邮箱：</span>
            <input type="text" id="email" value="${teacher.getTeacherEmail()}">
            ${teacher.getTeacherEmail()}
        </p>
        <p>
            <span>个人网址：</span>
            <input type="text" id="web">
        </p>
        <p>
            <span>备注：</span>
            <input type="text" id="desc" >
        </p>
        <p class="btn">开启通讯录</p>
    </div>
    <div class="qrcode" id="qrcode"></div>
</div>

<script src="${pageContext.request.contextPath}/static/infoCard/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/infoCard/js/qrcode.js"></script>
<script>
    var name, company, title, address, mobile, email, web, desc;
    $(".btn").click(function() {
        name = "FN:" + $("#name").val() + "\n";             //姓名
        company = "ORG:" + $("#company").val() + "\n";      //公司
        title = "TITLE:" + $("#title").val() + "\n";        //职务
        address = "WORK:" + $("#address").val() + "\n";     //地址
        mobile = "TEL:" + $("#mobile").val() + "\n";        //手机
        email = "EMAIL:" + $("#email").val() + "\n";        //邮箱
        web = "URL:" + $("#web").val() + "\n";              //网址
        desc = "NOTE:" + $("#desc").val() + "\n";           //备注

        var info = "BEGIN:VCARD\n" + name + company + title + address + mobile + email + web + desc + "END:VCARD";
        //console.log(info);
        //生成二维码
        var qrcode = new QRCode("qrcode");
        qrcode.makeCode(info);

    })
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
